<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台主页</title>
    <%-- <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">--%>
    <%-- <link href="${pageContext.request.contextPath}/lyq/echarts/css/basic.css" type="text/css"
        rel="stylesheet" />--%>
    <%-- <link href="${pageContext.request.contextPath}/lyq/echarts/css/visualize.css" type="text/css"
        rel="stylesheet" />--%>
    <%-- <link href="${pageContext.request.contextPath}/lyq/echarts/css/visualize-dark.css" type="text/css"
        rel="stylesheet" />--%>
    <%-- <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">--%>
    <%-- <!-- 布局样式，每一页都需引入 -->--%>
    <%-- <script src="${pageContext.request.contextPath}/lyq/echarts/js/jquery-1.4.2.min.js">
        </script>--%>
    <%-- <script src="${pageContext.request.contextPath}/js/bootstrap.js">
        </script>--%>
    <%-- <script type="text/javascript"
        src="${pageContext.request.contextPath}/lyq/echarts/js/excanvas.js">
        </script>--%>
    <%-- <script type="text/javascript"
        src="${pageContext.request.contextPath}/lyq/echarts/js/visualize.jQuery.js">
        </script>--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <script
            src="${pageContext.request.contextPath}/lyq/echartsdindanmoban/js/jquery.min.js"
            type="text/javascript"></script>
    <script
            src="${pageContext.request.contextPath}/lyq/echartsdindanmoban/js/amcharts.js"
            type="text/javascript"></script>
    <script
            src="${pageContext.request.contextPath}/lyq/echartsdindanmoban/js/serial.js"
            type="text/javascript"></script>
    <script
            src="${pageContext.request.contextPath}/lyq/echartsdindanmoban/js/pie.js"
            type="text/javascript"></script>
    <style type="text/css">
        .main {
            width: 700px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 0 auto;
            margin-top: 100px;
            overflow: hidden;
        }

        #line {
            width: 700px;
            height: 400px;
            margin-top: -15px;
        }
    </style>
</head>

<body>

<div id="container">

    <section class="public-main">
        <%--引入动态菜单栏--%>
        <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>

        <!-- 主体部分 -->
        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">
                    <div class="location">
                        <strong>课程管理</strong>
                        <span>课程列表</span>
                    </div>
                    <div class='main-right-header-right'>
                                        <span class="">
                                            <span
                                                    style="font-weight: bolder">${thisAccount.roleName}</span>：${thisAccount.realName}
                                        </span>

                        <span class="">
                                            <a href="${pageContext.request.contextPath}/index.jsp">
                                                <c:if test="${thisAccount.head!=''}">
                                                    <img src="img/head/${thisAccount.head}" style="width: 25px">
                                                </c:if>
                                                <c:if test="${thisAccount.head==''}">
                                                    <img src="img/head/initial.jpg" style="width: 25px">
                                                </c:if>
                                            </a>
                                        </span>
                        <c:if test="${thisAccount!=null}">
                                            <span class=""><a
                                                    href="${pageContext.request.contextPath}/loginContoller/returnLogin">退出登录</a></span>
                        </c:if>
                        <c:if test="${thisAccount==null}">
                                            <span class=""><a
                                                    href="${pageContext.request.contextPath}/loginContoller/returnLogin">未登录，快快点击登录吧~</a></span>
                        </c:if>
                    </div>

                </div>
            </header>

            <c:if test="${thisAccount.roleId==1 || thisAccount.roleId==2}">

                <div class='main-right-content'>
                    <div class="main">

                        <div class="jumbotron">
                            <h1>欢迎您来到</h1>
                            <p> &nbsp&nbsp&nbsp&nbsp&nbsp<img src='./img/logo.png' style="width: 30px;"/>&nbsp打牛蛙组教育集团后台管理系统~
                            </p>
                        </div>
                        <p><a class="btn btn-primary btn-lg" href="index_echarts.jsp" role="button" style="margin-left: 450px">点击可查看销售数据哦~</a></p>

                    </div>
                </div>

            </c:if>

            <%--除了超级管理员和服务商，其他商户不得看见图表--%>
            <c:if test="${thisAccount.roleId>2}">
                <div class='main-right-content'>
                    <div class="jumbotron">
                        <h1>欢迎您来到</h1>
                        <p> &nbsp&nbsp&nbsp&nbsp&nbsp<img src='./img/logo.png' style="width: 30px;"/>&nbsp打牛蛙组教育集团后台管理系统~</p>
                    </div>
                </div>
            </c:if>

            <footer>
                打牛蛙组教育集团
                联系电话：8055-4312-1233
            </footer>
        </div>
    </section>


</div>
<!-- 每一页需加上 -->
<script src="js/slider.js"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        // GetSerialChart();
        // MakeChart(json);
    });
</script>
<%--<script type="text/javascript"
    src="${pageContext.request.contextPath}/lyq/echarts/js/visualize.jQuery.js">
    </script>--%>
<script type="text/javascript">
    new Vue({
        el: ".main-right-content",
        data: {
            courseTotalsList: {}
        },
        methods: {
            findCourseTypeTotals: function () {
                var _this = this;
                let arr = [];
                axios.get("${pageContext.request.contextPath}/EchartsController/findEcharts").then(async function (response) {
                    const courseTotalsList = await response.data;
                    for (let item in courseTotalsList) {
                        arr.push({name: item, value: courseTotalsList[item]});
                    }
                    // await _this.renderLine(arr);
                }).catch(function (error) {
                    console.log(error);
                })
            },
            // renderLine: function (json) {
            //     var _this = this;
            //     console.log(json)
            //     //折线图
            //     AmCharts.ready(function () {
            //         var chart = new AmCharts.AmSerialChart();
            //         chart.dataProvider = json;
            //         chart.categoryField = "name";
            //         chart.angle = 30;
            //         chart.depth3D = 20;
            //         //标题
            //         //chart.addTitle("3D折线图Demo", 15);
            //         var graph = new AmCharts.AmGraph();
            //         chart.addGraph(graph);
            //         graph.valueField = "value";
            //         //背景颜色透明度
            //         graph.fillAlphas = 0.3;
            //         //类型
            //         graph.type = "line";
            //         //圆角
            //         graph.bullet = "round";
            //         //线颜色
            //         graph.lineColor = "#8e3e1f";
            //         //提示信息
            //         graph.balloonText = "[[name]]: [[value]]";
            //         var categoryAxis = chart.categoryAxis;
            //         categoryAxis.autoGridCount = false;
            //         categoryAxis.gridCount = json.length;
            //         categoryAxis.gridPosition = "start";
            //         chart.write("line");
            //     });
            // }
        },
        created: function () {
            this.findCourseTypeTotals();
        }
    })

</script>
</body>

</html>